<template>
  <view class="page" :data-theme="globPrimary">
    <u-navbar :is-back="false" :border-bottom="false">
      <view class="page-search">
        <u-search
          v-model="keyword"
          :show-action="false"
          :disabled="true"
          height="72"
          placeholder="搜索课程和关键字"
          @click="clickSearchInput"
        ></u-search>
        <view class="cart u-rela" @click="onTokenJump('pageCourse/cart/cart')">
          <u-badge :count="getGlobCartNumber" :offset="[-5, -10]"></u-badge>
          <u-image width="30px" height="31px" src="@/static/images/navbar_count_icon.png">
          </u-image>
        </view>
        <view class="news u-rela" @click="onTokenJump('/pageUser/user/message')">
          <u-badge :count="getGlobNotifyUnread" :offset="[0, 0]" is-dot></u-badge>
          <u-image width="30px" height="30px" src="@/static/images/navbar_news_icon.png"> </u-image>
        </view>
      </view>
    </u-navbar>
    <!-- 导航 START -->
    <Nav v-if="navShow" :list="navList" @click="handleNavChange"></Nav>
    <!-- 导航 END -->
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      :down="downOption"
      :up="upOption"
      :bottombar="false"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
    >
      <view>
        <template v-for="(pages, index) in templateList">
          <!-- banner START -->
          <Banner v-if="pages.key == 'banner'" :datas="pages" :key="index"></Banner>
          <!-- banner END -->

          <!-- 图文导航 START -->
          <QuickNav v-else-if="pages.key == 'graphicNav'" :datas="pages" :key="index"></QuickNav>
          <!-- 图文导航 END -->

          <!-- 广告位 START -->
          <Advert v-else-if="pages.key == 'advert'" :datas="pages" :key="index"></Advert>
          <!-- 广告位 END -->

          <!-- 课程 START -->
          <Course
            v-else-if="pages.key == 'course' || pages.key == 'intentCourse'"
            :datas="pages"
            :key="index"
            @click="openIntentionDialog"
          ></Course>
          <!-- 课程 END -->

          <!-- 讲师 START -->
          <Teacher v-else-if="pages.key == 'teacher'" :datas="pages" :key="index"></Teacher>
          <!-- 讲师 END -->

          <!-- 讲师 START -->
          <Topic v-else-if="pages.key == 'topic'" :datas="pages" :key="index"></Topic>
          <!-- 讲师 END -->
        </template>
      </view>
    </mescroll-body>
    <u-tabbar
      :list="tabbarList"
      :active-color="globPrimaryColor"
      inactive-color="#303133"
    ></u-tabbar>

    <u-popup v-model="intentionVisible" mode="right" width="100%">
      <intention @close="closeIntention" @submit="handleIntentionSubmit"></intention>
    </u-popup>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import tabbarList from '@/settings/tabbarSetting.js'
import { mapState, mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import Nav from './components/nav'
import Banner from './components/banner'
import QuickNav from './components/quickNav'
import Advert from './components/advert'
import Course from './components/course'
import Teacher from './components/teacher'
import Topic from './components/topic'
import Intention from './components/intention'
export default {
  mixins: [MescrollMixin],
  components: {
    Nav,
    Banner,
    QuickNav,
    Advert,
    Course,
    Teacher,
    Topic,
    Intention,
  },
  data() {
    return {
      tabbarList,
      downOption: { auto: false },
      upOption: { use: true },
      keyword: '',
      templateList: [],
      navShow: false,
      navList: [],
      category: 0,
      intentionVisible: false,
    }
  },
  computed: {
    ...mapState({
      getGlobCartNumber: (state) => state.projectSetting.globCartNumber,
      getGlobNotifyUnread: (state) => state.projectSetting.globNotifyUnread,
    }),
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globAppTitle: 'projectSetting/getGlobTitle',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    mescrollHeight() {
      let windowHeight = this.$u.sys().windowHeight
      let height = windowHeight - this.globNavbarHeight - this.globStatusBarHeight - 55
      return `${height}px`
    },
  },
  mounted() {
    // 更新初始化信息
    this.$store.dispatch('projectSetting/globUpdateInit')
  },
  onShareAppMessage(res) {
    return {
      title: this.globAppTitle,
      path: '/pages/index/index',
    }
  },
  onShow() {
    if (this.$store.getters['user/getHasLogin']) {
      // 用户信息
      this.$store.dispatch('user/setUserInfo')

      // 购物车数量
      this.$store.dispatch('projectSetting/setGlobCartNumber')

      // 未读消息
      this.$store.dispatch('projectSetting/setGlobNotifyUnread')
    }
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // 首页模板
    getTemplateData() {
      this.$edu.api.getHomeTemplate().then((res) => {
        this.templateList = res.data
        let navData = this.templateList.find((item) => item.key == 'topNav')
        if (navData) {
          this.navShow = true
          this.navList = navData.list.map((item) => {
            return {
              label: item.label,
              value: item.value,
            }
          })
        }
        this.mescroll.endSuccess(this.templateList.length)
        if (this.templateList.length > 3) {
          this.mescroll.showNoMore()
        }
      })
    },
    // 分类模板
    getCateData(id) {
      this.$edu.api.getHomeTemplateCatecourse({ cate: id }).then((res) => {
        this.templateList = res.data
        this.mescroll.endSuccess(this.templateList.length)
        if (this.templateList.length > 3) {
          this.mescroll.showNoMore()
        }
      })
    },
    handleNavChange(val) {
      this.templateList = []
      this.category = val
      this.mescroll.scrollTo(0, 0)
      this.mescroll.resetUpScroll()
    },
    upCallback() {
      if (this.category == 0) {
        this.getTemplateData()
      } else {
        this.getCateData(this.category)
      }
    },
    downCallback() {
      if (this.category == 0) {
        this.getTemplateData()
      } else {
        this.getCateData(this.category)
      }
    },
    clickSearchInput() {
      this.$u.route('pageCourse/course/search')
    },
    // 点击之前判断用户是否登录
    onTokenJump(url, params) {
      this.$edu.judgeLogin(() => {
        this.$u.route(url, params)
      })
    },
    // 打开选择意向的课程弹窗
    openIntentionDialog() {
      this.intentionVisible = true
    },
    // 关闭选择意向的课程弹窗
    closeIntention() {
      this.intentionVisible = false
    },
    // 提交选择的意向课程
    handleIntentionSubmit(id) {
      this.intentionVisible = false
      this.$edu.api
        .updateCourseFavorite({
          category: id,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          this.getTemplateData()
        })
    },
  },
}
</script>

<style lang="scss">
.page {
  background: #ffffff;
}
.page-search {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  .cart {
    margin-left: 34rpx;
  }
  .news {
    margin-left: 26rpx;
  }
}
</style>
